// 以类组件的形式路由传参

import {Button, Text, View} from 'react-native';
import React, {Component} from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>HomeScreen</Text>
      <Button
        title="Go to details"
        onPress={() =>
          navigation.navigate('Details', {itemId: 16, otherParam: 'ANY'})
        }
      />
    </View>
  );
}

function DetailsScreen({navigation, route}) {
  const {itemId, otherParam} = route.params;
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <Text>itemId:{JSON.stringify(itemId)}</Text>
      <Text>otherParam:{JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to details ...again"
        onPress={() =>
          navigation.push('Details', {itemId: Math.random() * 100})
        }
      />
      <Button title="Go to Home " onPress={() => navigation.navigate('Home')} />
      <Button title="Go back " onPress={() => navigation.goBack()} />
    </View>
  );
}

export default function Component1() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}
